<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
    *{margin: 0;padding: 0}
    .top{
        width: 1400px;
        height: 100px; 
    }
    .top-1{ 
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
        height: 100px;;
    }
    .top-2{
        margin-top: 27px;
        background-color: #F56600;
    }
    .top-3{
        float: left;
        height: 100px;
        width: 49px;
    }
    .top-3-1{
        text-indent: 15px;
        margin-top: 23px;
        float: left;
        height: 100px; 
        width: 951px;
    }
    .p1{
        font-size: 28px;
    }
    .p2{
        font-size: 12px;
    }
    .bd{
        width: 1636px;
        height: 590px;
        background-image: url("img/banner.png");
        margin-left: -196px;
    
    }
    .bd-1{
        text-align: center;
        width: 380px;
        height: 525px;
        background-color:#fff;
        position: absolute;
        margin-top: 36px;
        margin-left:1156px;
    }
    .db-1-1,.db-1-2,.db-1-3,.db-1-4,.db-1-5{
        margin-top: 5px;
        height:70px;
        width: 380px;
    }
    .db-1-1 li,.db-1-5 li{
        display: inline-block;
        list-style: none;
    }
    .db-1-1 li{
        margin-top: 15px;
        font-size: 25px;
    }
    .db-1-1 span{
        font-size: 20px;
    }
    .input-1,.input-2{
        text-indent: 15px;
        height: 50px;
        width: 340px;
    }
    .tex:hover{
        color: #F56600;
    }
    .tex,.input-2{
        cursor: pointer;
        } 
    .db-1-5,legend{
        color: #99B2D8;
        font-size: 14px;
    }
    .input-2{
        font-size: 20px;
        margin-top: 7px;
        color: #fff;
        border:#F56600;
        background-color: #F56600;
    }
    fieldset{
        margin-top: 35px;
        margin-left: 15px;
      width: 350px;
   border-top: 1px solid #99B2D8;
   border-left: none;
   border-right: none;
   border-bottom: none;
    }
.footer{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 350px;
    height: 80px;
}
.footer .one,.footer .two,.footer .three,.footer .four{
   overflow: hidden;
    display: inline-block;
    margin-right: 20px;
    margin-left: 15px;
    margin-top: 25px;
    width: 20px;
    height: 20px;
    background-color: #747474;
}
.footer .one img{
    margin-left: -18px;
}
.footer .two img{
    margin-left: -36px;
}
.footer .three img{
    margin-left: -58px;
}
.footer .four img{
    margin-left: -85px;
}
.current{
    color: #F56600;
}
.sm{
    display: none;
    width: 344px;
    height: 400px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.sm-1{
    margin-top: 60px;
    width: 181px;
    height: 181px;
    margin-left: auto;
    margin-right: auto;
}
.sm p{
    margin-top: 20px;
}
.sm a{
    text-decoration: none;
    color: #F56600;
}
 </style>
</head>
<body>
    <div class="top">
      <div class="top-1"> 
         <div class="top-3">
        <img src="img/mi-logo.png" alt="" class="top-2">
    </div>
    <div class="top-3-1">
        <p class="p1">小米商城</p>
        <p class="p2">让每个人都能享受科技的快乐</p>
    </div>
</div>
</div>
    <div class="bd">
        <div class="bd-1">
         <div class="db-1-1">
             <li class="tex  current zhangh">帐号登陆</li>
             <span>　|　</span>
             <li class="tex dl">扫码登陆</li>
         </div>

     <div class="sm">
<div class="sm-1">
        <img src="img/ma.png" alt=""></div>
        <p>使用 <a href="#"> 小米商城APP </a>扫一扫</p>
        <p>小米手机可打开 [设置] > [小米账号] 扫码登陆</p>
     </div>
         <div class="zh">


         <form action="">
         <div class="db-1-2">
             <input type="text" class="input-1" placeholder="邮箱/手机号码/小米账号">
         </div>
         <div class="db-1-3">
             <input type="text" class="input-1" placeholder="密码">
         </div>
         <div class="db-1-4">
             <input type="button" value="立即登录" class="input-2" >
         </div>
        </form>
         <div class="db-1-5">
                <li class="tex">注册小米账号</li>
                <span>　|　</span>
                <li class="tex">忘记密码？</li>
         </div>
       
         <fieldset>
                <legend>其他登陆方式</legend>
        </fieldset>
        <div class="footer">
            <div class="one"><a href="#"> <img src="img/icons_type.png" alt=""></a></div>
            <div class="two"><a href="#"><img src="img/icons_type.png" alt=""></a></div>
            <div class="three"><a href="#"><img src="img/icons_type.png" alt=""></a></div>
            <div class="four"><a href="#"><img src="img/icons_type.png" alt=""></a></div>
        </div>

    </div>
 </div>
 </div>
 <script>
  $(".db-1-1 li").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
        })
  $(".dl").click(function(){
        $(".sm").show();
        $(".zh").hide();
        })
  $(".zhangh").click(function(){
        $(".zh").show();
        $(".sm").hide();
        })

 </script>
 
</body>
</html>